<template>
  <div id="app">
    <h2>测试题</h2>
    <button @click="sheng">生成随机题目</button>
    <Subject
      v-for="(obj, index) in arr"
      :key="index"
      :x="obj.x"
      :y="obj.y"
      :index="index"
      @qiuhe="fn"
    ></Subject>
    <div>
      <Flag
        v-for="(item, index) in arr"
        :key="index"
        :index="index"
        :zt="item.zt"
      ></Flag>
    </div>
  </div>
</template>

<script>
import Subject from "./components/Subject.vue";
import Flag from "./components/Flag.vue";
export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    sheng() {
      let obj = {};
      for (let index = 0; index < this.getRandom(1, 10); index++) {
        let x = this.getRandom(1, 99);
        let y = this.getRandom(1, 99);
        obj = {
          x,
          y,
          zt: "未完成",
        };
        this.arr.push(obj);
      }
      console.log(this.arr);
      
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    fn(index, sum) {
      console.log(document.querySelectorAll("input"));
      if (this.arr[index].x + this.arr[index].y == sum) {
        this.arr[index].zt = "正确";
        document.querySelectorAll("input")[index].disabled = "disabled";
      } else if (this.arr[index].x + this.arr[index].y !== sum) {
        this.arr[index].zt = "错误";
        document.querySelectorAll("input")[index].disabled = "disabled";
      } else {
        this.arr[index].zt = "未完成";
      }
    },
  },
  components: {
    Subject,
    Flag,
  },
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>